<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">音乐列表</div>
        <div class="layui-card-body">
            <table id="musiclist" lay-filter="musicFilter"></table>
        </div>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script src="../js/music-player.js"></script>
<script>
    layui.use(function () {
        //获取模块对象
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;

        //为表格绑定行工具(单元格)事件
        table.on('tool(musicFilter)', function (row) {
            console.log(row)
            if (row.event === 'playOrPause') {
                // 处理播放按钮点击事件
                // 确保MusicPlayer模块已初始化
                if (window.MusicPlayer) {
                    // 创建音乐数据对象
                    var musicData = {
                        name: row.data.name,
                        singer: row.data.singer,
                        url: row.data.url || row.data.path
                    };
                    
                    // 获取当前页面的所有音乐数据作为播放列表
                    var musicTable = table.cache['musiclist'] || [];
                    var playList = musicTable.map(function(item) {
                        return {
                            name: item.name,
                            singer: item.singer,
                            url: item.url || item.path
                        };
                    });
                    
                    // 调用MusicPlayer播放音乐并设置播放列表
                    MusicPlayer.play(musicData, playList);
                    
                    // 更新按钮状态
                    var button = $(this);
                    var isPlaying = button.attr('data-playing') === '1';
                    if (isPlaying) {
                        button.attr('data-playing', '0');
                        button.find('i').removeClass('layui-icon-pause').addClass('layui-icon-play');
                        MusicPlayer.togglePlayPause();
                    } else {
                        button.attr('data-playing', '1');
                        button.find('i').removeClass('layui-icon-play').addClass('layui-icon-pause');
                    }
                    
                    // 确保所有播放按钮状态正确更新
                    setTimeout(function() {
                        updatePlayButtonStates();
                    }, 100);
                }
            } else if (row.event === 'details') {
                //显示歌曲详情弹层
                // 在此处输入 layer 的任意代码
                layer.open({
                    type: 1, // page 层类型
                    title: '歌曲详情',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: $('#music-details-dialog'),  // 弹层内容
                    success: function (layero, index) {  //当弹层正常展示时执行回调函数
                        //发送网络请求，根据当前歌曲的id查询歌曲详情，包括专辑信息
                        $.get('/music/details', {id: row.data.id}, function (resp) {
                            //如果服务端正常返回数据了则将数据在表格中渲染
                            if (resp.code === 0) {
                                layero.find('#musicName').text(resp.data.name)
                                layero.find('#singerName').text(resp.data.singer)
                                layero.find('#style').text(resp.data.style)
                                layero.find('#albumName').text(resp.data.album.name)
                                layero.find('#company').text(resp.data.album.company)
                                //持续时长
                                layero.find('#duration').text(fmtTime(resp.data.duration))
                                //对时间格式化处理
                                let date = layui.util.toDateString(resp.data.album.publishTime, "yyyy-MM-dd")
                                layero.find('#publishTime').text(date)
                                //设置封面图
                                layero.find('.coverImg').prop('src', resp.data.album.pic)
                                                //为详情弹窗中的音频元素设置src，但不自动播放
                                layero.find('.shiting').prop('src', resp.data.url);
                                //适配弹窗中的音频元素，实现与全局播放器的同步
                                MusicPlayer.adaptModalAudio(layero);
                            }
                        })
                    }
                });
            } else if (row.event === 'edit') {
                //打开编辑弹窗
                layer.open({
                    type: 1,
                    title: '编辑歌曲',
                    shade: 0.6,
                    shadeClose: true,
                    area: ['80%', '80%'],
                    maxmin: true,
                    content: $('#music-edit-dialog'),
                    success: function(layero, index) {
                        //加载歌曲详情数据
                        $.get('/music/details', {id: row.data.id}, function(resp) {
                            if (resp.code === 0) {
                                var data = resp.data;
                                //填充表单数据
                                form.val('music-info', {
                                    'id': data.id,
                                    'name': data.name,
                                    'sname': data.singer,
                                    'style': data.style,
                                    'lrc': data.lyric || ''
                                });
                                
                                //填充只读字段
                                layero.find('input[name=company]').val(data.album?.company || '');
                                layero.find('input[name=releasedate]').val(data.album?.publishTime ? layui.util.toDateString(data.album.publishTime, 'yyyy-MM-dd') : '');
                                layero.find('input[name=size]').val(data.size || '');
                                layero.find('input[name=duration]').val(fmtTime(data.duration));
                                
                                //设置封面图
                                layero.find('.coverImg').prop('src', data.album?.pic || '');
                                //设置试听地址，但不自动播放
                                layero.find('.shiting').prop('src', data.url);
                                //适配编辑弹窗中的音频元素，实现与全局播放器的同步
                                MusicPlayer.adaptModalAudio(layero);
                                
                                //加载专辑列表
                                $.get('/album/list', function(resp) {
                                    if (resp.code === 0) {
                                        var albumSelect = layero.find('#aid');
                                        albumSelect.empty();
                                        albumSelect.append('<option value="0">匿名</option>');
                                        
                                        resp.data.forEach(album => {
                                            var selected = data.album && data.album.id === album.id ? 'selected' : '';
                                            albumSelect.append('<option value="' + album.id + '" ' + selected + '>' + album.name + '</option>');
                                        });
                                        
                                        //重新渲染select组件
                                        form.render('select');
                                    }
                                });
                            } else {
                                layer.msg(resp.msg || '获取歌曲信息失败', {icon: 2});
                            }
                        });
                    }
                });
                
                //表单提交事件（编辑）
                form.on('submit(music-info)', function(data) {
                    //处理表单数据
                    var formData = data.field;
                    formData.singer = formData.sname;
                    delete formData.sname;
                    
                    //发送更新请求
                    $.ajax({
                        type: 'put',
                        url: '/music/update',
                        data: JSON.stringify(formData),
                        contentType: 'application/json;charset=utf-8',
                        success: function(resp) {
                            if (resp.code === 0) {
                                layer.msg('更新成功', {icon: 1});
                                //刷新表格
                                table.reload('musiclist');
                                //关闭弹窗
                                layer.closeAll();
                            } else {
                                layer.msg(resp.msg || '更新失败', {icon: 2});
                            }
                        }
                    });
                    
                    return false;
                });
            } else if (row.event === 'del') {
                //请求服务端实现删除功能
                layer.confirm('确定要删除吗？', {icon: 3}, function (index) {
                    $.ajax({
                        type: 'delete',
                        url: '/music/del',
                        data: {id: row.data.id},
                        success: function (resp) {
                            if (resp.code === 0) {
                                layer.msg('删除成功')
                                //刷新表格
                                table.reload('musiclist')
                            } else {
                                layer.msg(resp.msg, {icon: 2})
                            }
                        }
                    })
                })
            }
        })
        //为表格绑定头工具事件
    table.on('toolbar(musicFilter)', function(obj) {
        if (obj.event === 'search') {
            //获取搜索关键字
            var keyword = $('#keyword').val().trim();
            //重新加载表格数据
            table.reload('musiclist', {
                where: {
                    keyword: keyword
                },
                page: {
                    curr: 1 //重新从第1页开始
                }
            });
        } else if (obj.event === 'dels') {
            //获取选中的行
            var checkStatus = table.checkStatus('musiclist');
            if (checkStatus.data.length === 0) {
                layer.msg('请至少选择一首歌曲', {icon: 2});
                return;
            }
            
            //获取选中的ID数组
            var ids = checkStatus.data.map(item => item.id);
            
            layer.confirm('确定要删除选中的' + ids.length + '首歌曲吗？', {icon: 3}, function(index) {
                $.ajax({
                    type: 'delete',
                    url: '/music/batchDel',
                    data: JSON.stringify(ids),
                    contentType: 'application/json;charset=utf-8',
                    success: function(resp) {
                        if (resp.code === 0) {
                            layer.msg('删除成功');
                            //刷新表格
                            table.reload('musiclist');
                        } else {
                            layer.msg(resp.msg || '删除失败', {icon: 2});
                        }
                    }
                });
            });
        }
    });

        //数据表格渲染
        //初始化表格
        table.render({
            elem: '#musiclist',  //绑定table元素(使用的css选择器)
            url: '/music/list',  //服务端数据接口
            toolbar: '#toolbar',  //添加头部工具条
            page: {   //开启分页
                theme: '#1E9FFF',  //主题颜色
                limit: 5,   //每页显示的记录数
                limits: [5, 10, 15, 20, 30]  //每页显示的记录数数组
            },
            where: {}, //搜索条件
            cols: [[   //配置表头信息，以及对应字段信息
                {type: 'checkbox', width: 50},
                {type: 'numbers', title: '序号'},
                {field: 'name', title: '歌曲名', sort: true},
                {field: 'singer', title: '歌手', sort: true},
                {field: 'style', title: '风格'},
                {title: '时长', templet: function(d) { return fmtTime(d.duration); }},  //02:22
                {title: '标签', templet: function (d) {
                        //判断tags字段是否为空,为空则返回替代文本
                        if (!d.tags) return '无';
                        //使用","作为分隔将字符串转换为数组
                        let tags = d.tags.split(",");
                        let html = '';
                        tags.forEach(e => {
                            html += '<span class="layui-badge layui-bg-blue">' + e + '</span>&nbsp;';
                        })
                        return html;
                    }
                },
                {title: '播放', templet: '#preview', width: 80},
                {title: '操作', templet: '#rowTools', width: 200}
            ]]
        })


    })

    //将秒钟单位转换为mm:ss格式
    function fmtTime(seconds) {
        //根据提供的时间毫秒值转换为日期对象
        let time = new Date(seconds * 1000);
        //获取日期对象中的分和秒  03:05
        let m = time.getMinutes();
        let s = time.getSeconds();
        //转换为mm:ss格式
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;
        return m + ':' + s;
    }
    
    // 更新播放按钮状态的函数
    function updatePlayButtonStates() {
        if (!window.MusicPlayer || !MusicPlayer.getCurrentMusic()) {
            // 重置所有按钮为播放状态
            $('.preview-btn').attr('data-playing', '0');
            $('.preview-btn i').removeClass('layui-icon-pause').addClass('layui-icon-play');
            return;
        }
        
        const currentMusic = MusicPlayer.getCurrentMusic();
        
        // 重置所有按钮
        $('.preview-btn').each(function() {
            const $btn = $(this);
            const src = $btn.attr('data-src');
            
            if (src === currentMusic.url) {
                // 当前播放的音乐按钮
                $btn.attr('data-playing', '1');
                $btn.find('i').removeClass('layui-icon-play').addClass('layui-icon-pause');
            } else {
                // 其他按钮
                $btn.attr('data-playing', '0');
                $btn.find('i').removeClass('layui-icon-pause').addClass('layui-icon-play');
            }
        });
    }
    
    // 当页面加载完成后，更新播放按钮状态
    $(function() {
        // 确保播放器已初始化
        if (window.MusicPlayer) {
            // 延迟执行以确保播放器完全加载
            setTimeout(function() {
                updatePlayButtonStates();
            }, 500);
        }
    });
    

</script>
<!--自定义头工具栏-->
<script id="toolbar" type="text/html">
    <div class="layui-inline">
        <button class="layui-btn layui-btn-danger" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" class="layui-input" id="keyword" placeholder="请输入查询关键字">
        </div>
        <button class="layui-btn layui-btn-normal" lay-event="search">
            <i class="layui-icon layui-icon-search"></i>
            搜索
        </button>
    </div>
</script>

<!--自定义行工具栏-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-about"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

<!--试听按钮的页面模板-->
<script id="preview" type="text/html">
    <button class="layui-btn layui-btn-normal layui-btn-xs preview-btn" lay-event="playOrPause" data-playing="0"
            data-src="{{d.path}}">
        <i class="layui-icon layui-icon-play"></i>
    </button>
</script>


<!--歌曲详情弹层-->
<div id="music-details-dialog" style="display: none;padding: 20px">
    <table class="layui-table" lay-even>
        <tr>
            <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
            <td>歌曲名:</td>
            <td id="musicName">xxx</td>
            <td>专辑:</td>
            <td id="albumName">xxxx</td>
            <td>歌手：</td>
            <td id="singerName">xxxx</td>
        </tr>
        <tr>
            <td class="layui-elip">发行公司：</td>
            <td id="company" class="layui-elip">xxxx</td>
            <td class="layui-elip">发行时间</td>
            <td id="publishTime" class="layui-elip">xxxx</td>
            <td>歌曲风格</td>
            <td id="style">xxxx</td>
        </tr>
        <tr>
            <td>时长</td>
            <td id="duration">xxx</td>
            <td>试听</td>
            <td colspan="3">
                <audio src="" class="shiting" controls></audio>
            </td>
        </tr>
    </table>
</div>

<!--歌曲编辑弹层-->
<div id="music-edit-dialog" style="display: none;padding: 20px">
    <form class="layui-form" id="musicInfo" lay-filter="music-info">
        <input type="hidden" name="id">
        <table class="layui-table" lay-even>
            <tr>
                <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
                <td>歌曲名:</td>
                <td><input type="text" name="name" class="layui-input"></td>
                <td>专辑:</td>
                <td>
                    <select name="aid" id="aid" lay-filter="select-filter">
                        <option value="0">匿名</option>
                    </select>
                </td>
                <td>歌手：</td>
                <td><input type="text" name="sname" class="layui-input"></td>
            </tr>
            <tr>
                <td>发行公司：</td>
                <td><input type="text" class="layui-input" name="company" readonly></td>
                <td>发行时间</td>
                <td><input type="text" class="layui-input" name="releasedate" readonly></td>
                <td>歌曲风格</td>
                <td>
                    <select name="style">
                        <option value="流行">流行</option>
                        <option value="摇滚">摇滚</option>
                        <option value="民谣">民谣</option>
                        <option value="电子">电子</option>
                        <option value="轻音乐">轻音乐</option>
                        <option value="爵士">爵士</option>
                        <option value="R&B">R&B</option>
                        <option value="乡村">乡村</option>
                        <option value="中国风">中国风</option>
                        <option value="说唱">说唱</option>
                        <option value="古典">古典</option>
                        <option value="世界音乐">世界音乐</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>文件大小</td>
                <td><input type="text" class="layui-input" name="size" readonly></td>
                <td>持续时长</td>
                <td><input type="text" class="layui-input" name="duration" readonly></td>
                <td>试听</td>
                <td>
                    <audio src="" class="shiting" controls></audio>
                </td>
            </tr>
            <tr>
                <td colspan="7">
                    <textarea class="layui-textarea" name="lrc"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>